<template>
	<view class="container">
		<view v-if="isLoading" class="loading">
			<u-loading mode="circle"></u-loading>
		</view>
		<view v-else class="field-body" @click="handleSelect()">
			<view class="field-value oneline-hide">{{ valueText ? valueText: placeholder }}</view>
		</view>
		<u-select v-model="show" mode="mutil-column-auto" :list="options" :default-value="defaultValue"
			@confirm="onConfirm"></u-select>
	</view>
</template>

<script>
	import Emitter from '@/uview-ui/libs/util/emitter'
	import {
		isEmpty
	} from '@/utils/util'
	import SysArea from '@/common/model/SysArea'

	// 根据选中的value集获取索引集keys
	// 用于设置默认选中
	const findOptionsKey = (data, searchValue, deep = 1, keys = []) => {
		const index = data.findIndex(item => item.value === searchValue[deep - 1])
		if (index > -1) {
			keys.push(index)
			if (data[index].children) {
				findOptionsKey(data[index].children, searchValue, ++deep, keys)
			}
		}
		return keys
	}

	export default {
		name: 'SelectRegion',
		mixins: [Emitter],
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			// v-model 指定选中项
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 未选中时的提示文字
			placeholder: {
				type: String,
				default: '请选择省/市/区'
			}
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 是否显示
				show: false,
				// 默认选中的值
				defaultValue: [],
				// 选中项内容(文本展示)
				valueText: '',
				// 级联选择器数据
				options: []
			}
		},
		watch: {
			// 监听v-model
			value(val) {
				// 设置默认选中的值
				this.valueText = val.map(item => item.label).join('/')
				this.setDefaultValue(val)
				// 将当前的值发送到 u-form-item 进行校验
				this.dispatch('u-form-item', 'on-form-change', val)
			},
		},
		created() {
			// 获取地区数据
			this.getTreeData()
		},

		methods: {

			// 打开选择器
			handleSelect() {
				this.show = true
			},

			// 获取地区数据
			getTreeData() {
				const _this = this
				_this.isLoading = true
				SysArea.getTreeData()
					.then(regions => {
						// 格式化级联选择器数据
						this.options = regions
						// this.getOptions(regions)
					})
					.finally(() => _this.isLoading = false)
			},




			// 确认选择后的回调
			onConfirm(value) {
				// 绑定到v-model执行的值
				this.$emit('input', value)
				this.$emit('change', value)
			},

			/**
			 * 设置默认选中的值
			 * 该操作是为了每次打开选择器时聚焦到上次选择
			 * @param {Object} value
			 */
			setDefaultValue(value) {
				const values = value.map(item => item.value)
				const options = this.options
				this.defaultValue = findOptionsKey(options, values)
			},

			// /**
			//  * 格式化级联选择器数据
			//  * @param {*} regions 地区数据
			//  */
			// getOptions(regions) {
			//   const { getOptions, getChildren } = this
			//   const options = []
			//   for (const index in regions) {
			//     const item = regions[index]
			//     const children = getChildren(item)
			//     const optionItem = {
			//       value: item.id,
			//       label: item.name
			//     }
			//     if (children !== false) {
			//       optionItem.children = getOptions(children)
			//     }
			//     options.push(optionItem)
			//   }
			//   return options
			// },

			// // 获取子集地区
			// getChildren(item) {
			//   if (item.city) {
			//     return item.city
			//   }
			//   if (item.region) {
			//     return item.region
			//   }
			//   return false
			// }

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
	}

	.loading {
		padding-left: 10rpx;
		// text-align: center;
	}
</style>